import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { AtCurtain } from 'taro-ui';
import { View, Image, Text, RichText, Input } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime } from "../../utils/common";
import welfare_detailStyleSheet from "./welfare_detail_styles";

import banner_03 from '../../assets/img/banner_03.jpg';
import icon_71_on from "../../assets/img/icon_71_on.png";
var _styleSheet = welfare_detailStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let WelfareDetail = class WelfareDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      isOpened: false,
      optionArr: [1, 5, 10, 20, 50, 100, 150],
      currentOption: 0,
      amount: 1,
      showInput: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '投票' });
    let id = this.$router.params.id;
    this.getPublicWelfareInfo(parseInt(id));
  }
  getPublicWelfareInfo(id) {
    let { PublicWelfareStore } = this.props.stores;
    PublicWelfareStore.getPublicWelfareInfo({
      formId: id,
      callback: res => {
        this.setState({
          info: toJS(res)
        });
      }
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  onClose() {
    this.setState({ isOpened: false });
  }
  selectAmount(amount, index) {
    this.setState({ currentOption: index });
    if (amount === -1) {
      this.setState({ showInput: true });
    } else {
      this.setState({ amount, showInput: false });
    }
  }
  inputChange(e) {
    let amount = e.detail.value;
    this.setState({ amount: Math.abs(amount) });
  }
  // 支持按钮
  btnSupport() {
    this.setState({ isOpened: true });
  }
  // 支持付款按钮
  support() {
    let { amount } = this.state;
    let publicWelfareId = parseInt(this.$router.params.id);
    if (!publicWelfareId || !amount) {
      getRuntime().showToast('参数错误,请重试~');
      return;
    }
    let { PublicWelfareStore } = this.props.stores;
    PublicWelfareStore.publicWelfareBuy({
      form: {
        publicWelfareId,
        payMoney: amount
      },
      callback: res => {
        getRuntime().wxPay(res, () => {
          getRuntime().showToast('捐款成功,十分感谢您的爱心~');
        });
      }
    });
  }
  render() {
    let { info, isOpened, optionArr, showInput, currentOption } = this.state;
    return <View style={_styleSheet["welfare-record-detail"]}>
        <Image src={banner_03} style={_styleSheet["header-pic"]} />
          <View style={[_styleSheet["record-info"], _styleSheet["person-info"]]}>
            <Image src={info.logoImg} style={_styleSheet["icon-b"]} />
            <View style={_styleSheet["info"]}>
              <View style={_styleSheet["title"]}>{info.name}</View>
              <View style={_styleSheet["list-desc"]}>
                已获得 <Text style={_styleSheet["color"]}>{info.allCountPeople}</Text>人支持
              </View>
            </View>
            <Image src={icon_71_on} onClick={this.btnSupport.bind(this)} style={_styleSheet["btn-support"]} />
          </View>

        <View style={_styleSheet["article"]}>
          <View style={_styleSheet["interval"]} />
          <View style={[_styleSheet["column-title"], _styleSheet["content-30"]]}>
            <Text style={_styleSheet["column-name"]}>申请人故事</Text>
          </View>
          <View style={_styleSheet["welfare-article"]}>
            <RichText nodes={info.description} style={_styleSheet["rich-text"]} />
          </View>

          <View style={_styleSheet["interval"]} />
          <View style={[_styleSheet["column-title"], _styleSheet["content-30"]]}>
            <Text style={_styleSheet["column-name"]}>项目介绍</Text>
          </View>
          <View style={_styleSheet["welfare-article"]}>
            {info.introduce}
          </View>

          <View style={_styleSheet["footer-block"]} />
          <View onClick={this.btnSupport.bind(this)} style={_styleSheet["btn-big-support"]}>
            <View style={_styleSheet["btn"]}>支持TA</View>
          </View>
        </View>

         
        <View style={_styleSheet["report-amount"]}>
          <AtCurtain isOpened={isOpened} onClose={this.onClose.bind(this)}>
            <View style={_styleSheet["content"]}>
              <View style={_styleSheet["title"]}>请选择支持金额</View>
              <View style={_styleSheet["con"]}>
                {optionArr.map((item, index) => {
                return <View key={index} onClick={this.selectAmount.bind(this, item, index)} style={_getStyle(currentOption === index ? 'option option-active' : 'option')}>{item}元</View>;
              })}
                <View onClick={this.selectAmount.bind(this, -1, -1)} style={_getStyle(currentOption === -1 ? 'option option-active' : 'option')}>其他</View>
              </View>
              <Input placeholderClass="placeholder_class" placeholder="请输入资助金额" style={[_styleSheet["amount"], { display: !showInput ? 'none' : 'block' }]} type="number" onChange={this.inputChange.bind(this)} />
              <View onClick={this.support.bind(this)} style={_styleSheet["btn-report"]}>立即支持</View>
            </View>
          </AtCurtain>
        </View>
      </View>;
  }
};
WelfareDetail = tslib_1.__decorate([inject("stores"), observer], WelfareDetail);
export default WelfareDetail;